<template><!-- 商品橱窗弹出层 -->
  <div class="shop-window">
    <div class="header">
      <div class="title">商品橱窗</div>
    </div>
    <ul class="goods-list">
      <li class="goods-item" v-for="(item, index) in goodsList" :key="index">
        <div class="left">
          <img :src="item.imgUrl" alt="">
        </div>
        <div class="right">
          <div class="text">{{item.title}}</div>
          <div class="buy">
            <div class="gobuy" @click="goLink(item.link, item.id, item.title, item)" />
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
  export default {
    props: {
      goodsList: Array,
    },
    data() {
      return {

      }
    },
    create() {
    },
    methods: {
      goLink(link, id, title, item) {
        //点击购买埋点
        this.$emit('formChildMsg', {
          type:'goShop',
          id,
          title,
          item
        })
      }
    },

  }
</script>

<style scoped lang="less">
  .shop-window {
    height: 646px;
    overflow: hidden;

    .header {
      width: 100%;
      height: 60px;
      border-bottom: 1px solid #F1F2F5;
      display: flex;
      justify-content: center;

      .title {
        height: 45px;
        margin-top: 11px;
        font-size: 32px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 600;
        color: #5E6678;
        line-height: 45px;
        letter-spacing: 1px;
      }
    }

    .goods-list {
      height: calc(100% - 60px);
      padding: 0 24px;
      overflow: scroll;

      .goods-item {
        margin: 19px 0 9px 0;
        display: flex;

        .left {
          width: 133px;
          height: 133px;
          margin-right: 14px;

          img {
            width: 133px;
            height: 133px;
          }
        }
      }

      .right {
        width: 100%;

        .text {
          width: 100%;
          height: 80px;
          font-size: 28px;
          font-family: PingFangSC, PingFang SC;
          font-weight: 600;
          color: #5E6678;
          line-height: 40px;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }

        .buy {
          display: flex;
          justify-content: flex-end;

          .gobuy {
            width: 126px;
            height: 50px;
            margin-top: 4px;
            background: url('../../../../../assets/images/pureVideo/goBuy.png') no-repeat;
            background-size: 100%;
          }
        }
      }
    }
  }
</style>